<template>
  <div class="comment-section">
    <!-- 使用新的文章评论区组件，只显示前三条评论 -->
    <ArticleCommentSection
      :article-id="articleId"
      :max-level="2"
      :children-limit="5"
      :page-size="10"
      :flat-replies="true"
      :reply-sort-type="1"
      :initial-display-count="3"
      @comment-count-change="handleCommentCountChange"
    />
  </div>
</template>

<script setup lang="ts">
import ArticleCommentSection from "./ArticleCommentSection.vue";

interface Props {
  articleId: number;
  commentCount?: number;
}

const props = withDefaults(defineProps<Props>(), {
  commentCount: 0
});

// Emits定义 - 用于通知父组件评论数变化
const emit = defineEmits<{
  commentCountChange: [count: number];
}>();

// 处理评论数量变化
const handleCommentCountChange = (count: number) => {
  console.log("📝 评论数量变化:", count);
  emit("commentCountChange", count);
};
</script>

<style scoped lang="scss">
@use "@/styles/user-theme.scss" as *;

.comment-section {
  padding-top: 20px;
  margin-top: 32px;
  border-top: 1px solid var(--el-border-color-light);

  /* 移动端适配 - 以iPhone XR为基准 */
  @media screen and (width <= 767px) {
    padding-top: 16px !important;
    margin-top: 24px !important;
  }

  /* 小屏手机适配 */
  @media screen and (width <= 375px) {
    padding-top: 12px !important;
    margin-top: 20px !important;
  }
}

// 暗色主题适配
.dark {
  .comment-section {
    border-color: var(--el-border-color-darker);
  }
}
</style>
